<!DOCTYPE html>
<html>
<head>
  <title>SRS Cloud</title>
  <meta charset="utf-8">
  <style>
      body {
          margin: 10px 10px 10px 10px;
      }
  </style>
</head>
<body>
  <video id="player" autoplay controls muted></video>
</body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/mpegts-1.7.3.min.js"></script>
<script type="text/javascript" src="js/hls-1.4.14.min.js"></script>
<script type="text/javascript">
  $(function(){
    // See https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
    const q = new URLSearchParams(location.search);

    const resource = q.get('url');
    if (!resource) return alert(`No URL`);

    const video = document.getElementById('player');
    if (resource.indexOf('.m3u8') > 0) {
      if (!Hls.isSupported()) {
        // See https://stackoverflow.com/a/12905122/17679565
        if (document.createElement('video').canPlayType('application/vnd.apple.mpegURL')) {
          console.log(`Play by native for ${resource}`);
          $('#player').prop('src', resource);
          return;
        }
        return alert(`HLS is not supported, url is ${resource}`);
      }

      // See https://github.com/video-dev/hls.js/blob/master/docs/API.md#maxlivesyncplaybackrate
      // See https://github.com/video-dev/hls.js/issues/3077#issuecomment-705152394
      const player = new Hls({
        enableWorker: true, // Improve performance and avoid lag/frame drops.
        lowLatencyMode: true, // Enable Low-Latency HLS part playlist and segment loading.
        liveSyncDurationCount: 2, // Start from the last few segments.
        liveMaxLatencyDurationCount: 10, // Maximum delay allowed from edge of live.
        maxBufferLength: 8, // Maximum buffer length in seconds.
        maxMaxBufferLength: 10, // The max Maximum buffer length in seconds.
        maxLiveSyncPlaybackRate: 1.2, // Catch up if the latency is large.
        liveDurationInfinity: true // Override current Media Source duration to Infinity for a live broadcast.
      });
      player.loadSource(resource);
      player.attachMedia(video);
      video.play();
      console.log(`Play by hls.js for ${resource}`);
      return;
    }

    // Start play HTTP-FLV.
    let isFlv = resource.indexOf('.flv') > 0;
    // Compatible with NGINX-HTTP-FLV module, see https://github.com/winshining/nginx-http-flv-module and the stream
    // url without .flv, such as:
    //          http://localhost:8080/live?app=live&stream=livestream
    isFlv = isFlv || resource && resource.indexOf('http') === 0;
    if (isFlv) {
      if (!mpegts.getFeatureList().mseLivePlayback) {
        return alert(`HTTP-FLV is not supported, url is ${resource}`);
      }

      // See https://github.com/xqq/mpegts.js/blob/master/src/config.js#L32
      // See https://github.com/xqq/mpegts.js/blob/master/docs/api.md
      const player = mpegts.createPlayer({
        type: 'flv', url: resource,
        isLive: true, enableStashBuffer: false, liveSync: true
      });
      player.attachMediaElement(video);
      player.load();
      player.play();
      console.log(`Play by flv.js for ${resource}`);
      return;
    }

    const msg = `Not supported URL ${resource}`;
    console.error(msg);
    alert(msg);
  });
</script>
</html>

